<template>
    <el-row v-for="item in dish" >
        <el-col :span="5">
            <div style="display: flex; align-items: center; width:120px;height:120px">
                <el-avatar shape="square" :size="100" :src="'http://localhost:8073'+item.image" class="avatar" />
            </div>
        </el-col>
        <el-col :span="14">
            <div style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 30px; font-weight: bold; color: #333;">
                {{item.name}}
            </div>
            <div style="display: flex; align-items: center;">
                <el-avatar shape="square" :size="22" src="../../public/img/rmb.png" class="avatar"></el-avatar>
                <span style="margin-left: 5px;">{{item.price}}</span>
            </div>
            <div style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; color: #666; text-align: justify;margin-right: 5px;">
                {{item.description}}
            </div>
        </el-col>
        <el-col :span="5" style="display: flex; align-items: center;">
            <el-button :plain="true" style="margin-left: 10px;" type="success" @click="toOrder(item.id,item.name,item.price)">我要点这个</el-button>
        </el-col>
    </el-row>
    <br>
    <br>
</template>

<script setup>

    import {computed, onMounted,ref} from "vue";
    import store from "../../store";
    import {
        addToShoppingCart,
        getDishDetail,
        getMerchant,
        queryHot,
        selectAllCart,
        updateShoppingCart, updateToShoppingCart
    } from "../../api/merchant";
    import {useRoute, useRouter} from "vue-router";
    import {ElMessage} from "element-plus";

    const route = useRoute();
    const router = useRouter()
    const merchantId=computed(() => {
        return store.getters.getMerchantId
    })
    const userId=computed(() => {
        return store.getters.getId
    })

    const dish=ref([])
    const Foods=ref([])
    //对象
    const food=ref({})

    onMounted(()=>{
        queryHot({merchantId:merchantId.value}).then(res=>{
            dish.value=res.data
            console.log(dish.value)
        })
    })



    const toOrder=(id)=>{
        const data={userId:userId.value,merchantId:merchantId.value,increment:1,dishId:id}
        updateToShoppingCart(data)
        //弹出成功信息
        ElMessage({
            message: '添加菜品成功！',
            type: 'success',
        })
    }
</script>

<style scoped>

</style>